<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <style>
        #main {
            border: 1px solid #000;
        }
    </style>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../lib/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px; height: 400px"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#main'))

        // 指定图表的配置项和数据
        const option = {
            // 标题部分的设置
            title: {
                text: '2021全学科薪资走势',
            },
            // 图表
            grid: {
                // 设置上下左右的间隙
                top: '10%',
                left: '10%',
                right: '10%',
                bottom: '10%',
            },
            // x轴的设置
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', 'Thu', 'Fri', 'Sat', 'Sun'],
                // x轴线段设置
                axisLine: {
                    // 线段的样式
                    lineStyle: {
                        // 类型 虚线
                        type: 'dashed',
                        // 颜色
                        color: '#d3d3d3',
                    },
                },
                // x轴文本设置
                axisLabel: {
                    // 颜色
                    color: 'black',
                },
            },
            // y轴的设置
            yAxis: {
                type: 'value',
                // 分割线
                splitLine: {
                    // 线的样式
                    lineStyle: {
                        type: 'dashed', // 类型
                        // width:20, // 宽度
                        color: 'deepskyblue', // 颜色
                    },
                },
            },
            color: ['#5f8eff'],
            // 提示框 设置了才会出现
            tooltip: {
                show: true,
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                // 圆圈
                smooth: true,
                // 圆圈大小
                symbolSize: 10,
                // 线宽
                lineStyle: {
                    width: 8,
                },
                // 区域颜色
                areaStyle: {
                    // 渐变
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: '#aed4ff', // 0% 处的颜色
                            },
                            {
                                offset: 0.7,
                                color: '#ffffff', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            }, ],
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>